<template>
    <fieldset>
        <legend>个人中心</legend>
        <h1>恭喜你,成为了他们的哥哥</h1>
        <h2>query参数:{{ $route.query }}</h2>
        <h2>
            vuex中的name:
            <!-- <i style="color:red">{{ $store.state.name }}</i> -->
            <i style="color:red">{{ nickname }}</i>

        </h2>

        <h2>
            getters的值:
            <!-- <i style="color:red">{{ $store.getters.reverseN }}</i> -->
            <i style="color:red">{{ reverseN }}</i>
        </h2>
        <fieldset>
            <legend>计数器</legend>
            <button @click="DECREASE">-</button>
            &nbsp;
            <b>{{ num }}</b>
            &nbsp;
            <button @click="INCREASE(777)">+</button>
        </fieldset>
    </fieldset>
</template>
<script>
//辅助函数mapState获取state
//辅助函数mapGetters获取getters
//辅助函数mapMutations获取mutaion
//辅助函数mapActions获取action
import { mapState, mapGetters, mapMutations,mapActions } from 'vuex'
export default {
    //state或者getters一般会映射在组件的computed属性
    computed: {
        ...mapState(['name', 'age', 'nickname', 'num']),
        ...mapGetters(['reverseN'])
    },
    mounted() {
        // console.log(this.$route)
        // console.log(this.$store)
        console.log(this.nickname)
        console.log(this.reverseN)
    },
    methods: {
        // handleIncrease() {
        //     //通过commit来触发mutaion函数
        //     this.$store.commit('INCREASE', '吸氧羊')
        // },
        ...mapMutations(['INCREASE','DECREASE']),
        // ...mapActions([''])
    }
}
</script>